<template>
	<view class="box">
		<view class="Icon" :style="{ top: (safeAreaInsets.top * 2) + 'rpx' }">
			<uni-icons type="back" size="24" @click="ToBuyhouse" color="#fff"></uni-icons>
		</view>
		<view class="Img">
			<image :src="dataobj && dataobj.newdataobj.img" />
		</view>
		<view class="con">
			<view class="brief">
				<view class="title">
					{{ dataobj.newdataobj.name }}{{ dataobj.newdataobj.house_type }}
					{{ dataobj.newdataobj.price }}万{{ dataobj.newdataobj.ll }}平
				</view>
				<view class="price">
					<view>
						<text>{{ dataobj.newdataobj.price }}</text>万
					</view>
					<view>
						<text>{{ dataobj.newdataobj.house_type }}</text>
					</view>
					<view v-if="dataobj.newdataobj.renovation === '毛坯房'">
						<text>2</text>厅
						<text>1</text>卫
					</view>
					<view>
						<text>{{ dataobj.newdataobj.ll }}</text>㎡
					</view>
					<view class="btn" @click="ToVrHouse">
						<view class="one">VR看房</view>
					</view>
				</view>
			</view>
			<view class="details">
				<view style="font-size: 40rpx; font-weight: bold; margin-bottom: 20rpx;">房源信息</view>
				<view class="details-con">
					<view>
						<view class="details-con-title">
							单价
						</view>
						<view class="details-con-con">{{ dataobj.newdataobj.extent }}/㎡</view>
					</view>
					<view>
						<view class="details-con-title">
							朝向
						</view>
						<view class="details-con-con">
							{{ dataobj.newdataobj.toward }}
						</view>
					</view>
					<view>
						<view class="details-con-title">
							装修
						</view>
						<view class="details-con-con">
							{{ dataobj.newdataobj.renovation }}
						</view>
					</view>
					<view>
						<view class="details-con-title">
							楼层
						</view>
						<view class="details-con-con">
							{{ dataobj.newdataobj.house_type }}
						</view>
					</view>
					<view>
						<view class="details-con-title">
							类型
						</view>
						<view class="details-con-con">
							{{ dataobj.newdataobj.useto }}
						</view>
					</view>
					<view>
						<view class="details-con-title">
							更新
						</view>
						<view class="details-con-con">
							29分钟之前
						</view>
					</view>
				</view>
			</view>
			<view class="characteristic">
				<view style="font-size: 40rpx; font-weight: bold; margin-bottom: 20rpx;">房源特色</view>
				<view class="characteristic-con">
					<uni-section title="核心卖点" type="line">
						<view class="characteristic-con-item">
							{{ dataobj.newdataobj.area }}
							原始装修三室两厅一卫客厅朝阳两卧室朝阳楼层好
							{{ dataobj.newdataobj.resident }}
							{{ dataobj.newdataobj.name }}
						</view>
					</uni-section>
					<uni-section title="业主心态" type="line">
						<view class="characteristic-con-item">
							业主诚心出售此房，积极配合看房和达成协议后的各项手续。
							产权清晰无纠纷，看房方便，房主诚意出售
						</view>
					</uni-section>
					<uni-section title="服务介绍" type="line">
						<view class="characteristic-con-item">
							我从事房产工作已有多年，经验丰富。<br>
							1：能精准的根据每一位客户的详细需求匹配到性价比合适的。<br>
							2：和业主议价是我的强项，让每位客户真正的省钱。<br>
							3：我们的服务能让您物超所值。<br>
							4：您的买房安家之旅，让您更加 安心 放心 省心
						</view>
					</uni-section>
				</view>
			</view>
			<view class="qita" v-if="HouseType">
				<view class="qita-title">
					<view>{{ dataobj.newdataobj.name }}</view><text>小区详情></text>
				</view>
				<view class="qita-con">
					<view class="qita-con-left">
						<image :src="dataobj.newdataobj.img" />
					</view>
					<view class="qita-con-right">
						<view>参考均价： <text style="color: red;">{{ dataobj.newdataobj.extent }}</text>万元/㎡</view>
						<view>比 上 月： 持平</view>
						<view>小区地址： {{ dataobj.newdataobj.area }}</view>
					</view>
				</view>
				<view class="chakan">查看同小区1套在售房源></view>
			</view>
			<view class="loan" v-if="HouseType">
				<view style="font-size: 40rpx; font-weight: bold; margin-bottom: 20rpx;">参考月贷</view>
				<view class="loan-con">
					<view class="loan-con-top">
						<view @click="LoanTab(index)" v-for="(item, index) in Loantext" :key="index"
							:class="LoantextIndex === index ? 'on' : ''">{{ item }}</view>
					</view>
					<view class="loan-con-con">
						月供 ￥<text>{{ ((parseInt(dataobj.newdataobj.price / 12) / 30) + (3328 / 10000)).toFixed(2) }}万</text>
						(30年)
					</view>
					<view class="loan-con-bom">
						<view class="loan-con-bom-item">
							<view class="loan-con-bom-item-title">
								总价
							</view>
							<view class="loan-con-bom-item-con">
								{{ dataobj.newdataobj.price }}万
							</view>
						</view>
						<view class="loan-con-bom-item">
							<view class="loan-con-bom-item-title">
								首付
							</view>
							<view class="loan-con-bom-item-con">
								{{ parseInt(dataobj.newdataobj.price / 3) }}万<text style="color: #B7B7B7;">(3成)</text>
							</view>
						</view>
						<view class="loan-con-bom-item">
							<view class="loan-con-bom-item-title">
								贷款
							</view>
							<view class="loan-con-bom-item-con">
								{{ dataobj.newdataobj.price - parseInt(dataobj.newdataobj.price / 3) }}万
							</view>
						</view>
						<view class="loan-con-bom-item">
							<view class="loan-con-bom-item-title">
								利息
							</view>
							<view class="loan-con-bom-item-con">
								{{ 88.33 }}万
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="map">
				<view style="font-size: 40rpx; font-weight: bold; margin-bottom: 20rpx;">推荐房源</view>
				<view class="map-con">
					<image src="http://10.31.71.52:7002/public/static/Xinfang/mapimg.png" />
				</view>
			</view>

			<!-- 底部安全距离盒子 -->
			<view class="bom"></view>
		</view>
		<!-- 底部导航 -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const dataobj = reactive({
	newdataobj: {}
});
const HouseType = ref(true);
// 获取状态栏高度
const { safeAreaInsets } = uni.getSystemInfoSync()
const options = [{
	icon: 'person-filled',
	text: '客服'
}, {
	icon: 'star',
	text: '收藏',
}]
const Loantext = reactive([
	'等额本息',
	'等额本金'
]);

const LoantextIndex = ref(0);
onLoad((e) => {
	uni.request({
		url: "http://10.31.71.52:7002/second/housing",
		method: 'GET',
		data: {
			id: e.id
		},
		success: function (res) {
			if (res.data.code === 1) {
				dataobj.newdataobj = res.data.data[0];
				HouseType.value = true;
			}
		}
	})
	uni.request({
		url: "http://10.31.71.52:7002/housing",
		method: 'GET',
		data: {
			id: e.id
		},
		success: function (res) {
			if (res.data.code === 1) {
				dataobj.newdataobj = res.data.data[0];
				HouseType.value = false;
			}
		}
	})
})

const buttonGroup = [{
	text: '在线咨询',
	backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
	color: '#fff',
},
{
	text: '电话咨询',
	backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
	color: '#fff',
}
]

const ToBuyhouse = () => {
	uni.navigateBack() 

}
const LoanTab = (index) => {
	LoantextIndex.value = index;
}

const ToVrHouse = () => {
	uni.navigateTo({
		url: '/subpkg/vrhouse/vrhouse',
	})
}
</script>
<style lang="scss" scoped>
.box {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: scroll;

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.Icon {
		width: 60rpx;
		height: 60rpx;
		background: rgba($color: #000000, $alpha: .5);
		border-radius: 50%;
		position: fixed;
		left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Img {
		width: 100%;
		height: 560rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.con {
		width: 100%;
		height: auto;

		.brief {
			width: 96%;
			min-height: 200rpx;
			display: flex;
			margin: 10rpx auto;
			flex-direction: column;
			justify-content: space-around;

			.title {
				width: 100%;
				height: 40%;
				font-size: 42rpx;
				display: flex;
				justify-content: space-between;

			}

			.price {
				color: #F16E71;
				display: flex;
				align-items: center;
				position: relative;

				view {
					margin-right: 15rpx;
				}

				text {
					font-weight: bold;
					font-size: 36rpx;
				}

				.btn {
					background-color: transparent;
					text-transform: uppercase;
					font-size: 14px;
					padding: 10px 20px;
					position: absolute;
					right: 0rpx;

				}

				.one {
					color: #4cc9f0;
				}

				.btn:hover {
					color: white;
					border: 0;
				}

				.one:hover {
					color: white;
					background-color: #4cc9f0;
					-webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
					-moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
					box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
				}
			}
		}

		.details {
			width: 96%;
			height: auto;
			margin: 10rpx auto;

			.details-con {
				width: 100%;
				height: 270rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				background: #fff;

				>view {
					width: 32%;
					height: 48%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.details-con-title {
						color: #B8B8B8;
					}

					.details-con-con {
						font-size: 36rpx;
					}
				}
			}
		}

		.characteristic {
			width: 96%;
			height: auto;
			margin: 10rpx auto;

			.characteristic-con-item {
				padding-left: 20rpx;
			}
		}

		.qita {
			width: 96%;
			height: auto;
			margin: 10rpx auto;

			.qita-title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					color: #B7B7B7;
				}

				view {
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}

			.qita-con {
				width: 100%;
				height: 200rpx;
				background: #fff;
				display: flex;
				justify-content: space-around;

				.qita-con-left {
					width: 30%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.qita-con-right {
					width: 65%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}
		}

		.chakan {
			width: 96%;
			height: auto;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			color: red;
		}

		.loan {
			width: 96%;
			height: 460rpx;
			margin: 20rpx auto;

			.loan-con {
				width: 100%;
				height: 380rpx;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0px -3px 5px 0px rgba(0, 0, 0, 0.2),
					-3px 0px 3px 0px rgba(0, 0, 0, 0.2),
					3px 0px 3px 0px rgba(0, 0, 0, 0.2),
					0px 3px 10px 0px rgba(0, 0, 0, 0.2);

				.loan-con-top {
					width: 100%;
					height: 25%;
					display: flex;
					align-items: center;
					font-size: 30rpx;

					.on {
						background: #FFF0F6;
					}

					view {
						width: 50%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.loan-con-con {
					width: 100%;
					height: 37%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #B7B7B7;
					font-size: 24rpx;

					text {
						font-size: 40rpx;
						color: black;
						display: flex;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}

				.loan-con-bom {
					width: 100%;
					height: 37%;
					display: flex;
					justify-content: space-around;

					.loan-con-bom-item {
						width: 24%;
						height: 100%;
						display: flex;
						flex-direction: column;

						.loan-con-bom-item-title {
							width: 100%;
							height: 40%;
							font-size: 24rpx;
							color: #B7B7B7;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.loan-con-bom-item-con {
							width: 100%;
							height: 60%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

		.map {
			width: 96%;
			height: 400rpx;
			margin: 20rpx auto;

			.map-con {
				width: 100%;
				height: 350rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bom {
			width: 96%;
			height: 90rpx;
			margin: 20rpx auto;
		}
	}
}
</style>